
<template>
  <div>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="800px" top="10vh" :close-on-click-modal="false"
      @close="closeDialog">
      <div class="header">
        <div>
          <el-form :inline="true" ref="refSearchForm" class="search-form" size="small">
            <el-form-item>
              <el-date-picker size="small" v-model="timeDevice1" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始日期" default-time="00:00:00" :picker-options="pickerOptions">
              </el-date-picker>
              <el-date-picker size="small" style="margin-left: 10px;" v-model="timeDevice2" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期" default-time="23:59:59"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item size="small" class="search-button">
              <el-button size="small" @click="searchClick" class="el_button" :loading="loadingSearch">查询
              </el-button>
              <el-button class="el_button" size="small" @click="resetClick" :loading="loadingReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
      <div class="content">
        <el-table :data="dataList" class="table" height="370" ref="refTable" row-key="id"
          :header-cell-style="headerStyle">
          <el-table-column align="center" label="序号" type="index" width="80" height="30">
          </el-table-column>
          <el-table-column align="center" prop="status" label="设备状态" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <div v-if="deviceInfo.deviceType == 'DoorMagnetism'">
                <el-tag type="success" size="mini" v-if="row.status == 1">开门</el-tag>
                <el-tag type="danger" size="mini" v-else>关门</el-tag>
              </div>
              <div v-if="deviceInfo.deviceType == 'Infrared'">
                <el-tag type="danger" size="mini" v-if="row.status == 1">有人</el-tag>
                <el-tag type="success" size="mini" v-else>无人</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="createTime" label="上报时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <pagination v-if="deviceInfo.deviceType == 'DoorMagnetism'" :page.sync="page" :limit.sync="limit" :total="total" @pagination="getDataList" class="pagination">
        </pagination>

        <pagination v-else :page.sync="page" :limit.sync="limit" :total="total" @pagination="InfraredDetectionPage" class="pagination">
        </pagination>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqDoorList,reqInfraredDetectionPage } from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      page: 1,
      limit: 10,
      total: 0,
      dataList: [],
         loadingSearch: false, //查询按钮loading
      loadingReset: false, //重置按钮loading
      timeDevice1: "", //时间开始
      timeDevice2: "", //时间结束
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 选当前时间之后的时间
        },
      },
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    deviceInfo(val) {
      // this.getDataList();
       this.page = 1;
      this.limit = 10;
      if (val.deviceType == "DoorMagnetism") {
        this.getDataList();
      } else if (val.deviceType == "Infrared") {
        this.InfraredDetectionPage();
      }
    },
  },
  methods: {
     // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      if (this.deviceInfo.deviceType == "DoorMagnetism") {
        this.getDataList();
      } else if (this.deviceInfo.deviceType == "Infrared") {
        this.InfraredDetectionPage();
      }
    },
    // 重置
    async resetClick() {
      this.timeDevice1 = this.timeDevice2 = "";
      this.page = 1;
      this.limit = 10;
      if (this.deviceInfo.deviceType == "DoorMagnetism") {
        this.getDataList();
      } else if (this.deviceInfo.deviceType == "Infrared") {
        this.InfraredDetectionPage();
      }
    },
    // 门磁列表
    async getDataList() {
       if (this.timeDevice1 == null) {
        this.timeDevice1 = "";
      }
      if (this.timeDevice2 == null) {
        this.timeDevice2 = "";
      }
      let params = {
        imei: this.deviceInfo.imei,
         startTime: this.timeDevice1,
        endTime: this.timeDevice2,
        spaceId: this.deviceInfo.spaceId,
      };
      const res = await reqDoorList(this.page, this.limit, params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
     // 红外
    async InfraredDetectionPage() {
      if (this.timeDevice1 == null) {
        this.timeDevice1 = "";
      }
      if (this.timeDevice2 == null) {
        this.timeDevice2 = "";
      }
      let params = {
        imei: this.deviceInfo.imei,
        startTime: this.timeDevice1,
        endTime: this.timeDevice2,
        spaceId: this.deviceInfo.spaceId,
      };
      const res = await reqInfraredDetectionPage(this.page, this.limit, params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },

    // 点击关闭弹框
    closeDialog() {
      this.timeDevice1 = this.timeDevice2 = "";
      this.dataList = [];
      this.total = 0;
      this.page = 1;
      this.limit = 10;
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");
.header {
  display: flex;
  justify-content: space-between;
  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    .label {
      margin: 0 10px;
      .name {
        font-size: 16px;
      }
    }
  }
  .right {
    margin-right: 10px;
  }
}
</style>